<template>
  <div>
    <el-button @click="loadTable">加载</el-button>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="date" label="Date" sortable />
      <el-table-column prop="name" label="Name">
        <template v-slot="scope">
          <lazy-component>
            <el-select v-model="scope.row.name">
              <el-option
                v-for="item in opts"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </lazy-component>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface User {
  id: number;
  date: string;
  name: string;
  hasChildren?: boolean;
  children?: User[];
}

let uuid = 10;
function genUuid() {
  return uuid++;
}

const opts = ref([
  {
    label: '1',
    value: '1',
  },
  {
    label: '2',
    value: '2',
  },
  {
    label: '3',
    value: '3',
  },
  {
    label: '4',
    value: '4',
  },
]);

function genChilds(n = 100) {
  const nodes = [];

  for (let i = 0; i < n; i++) {
    nodes.push({
      id: genUuid(),
      date: 'test-' + genUuid(),
      name: 'wangxiaohu',
    });
  }

  return nodes;
}

function genNestChilds(n = 10) {
  const nodes = [];

  for (let i = 0; i < n; i++) {
    nodes.push({
      id: genUuid(),
      date: 'test-' + genUuid(),
      children: n % 2 ? [] : genChilds(50),
      name: 'wangxiaohu',
    });
  }

  return nodes;
}

const tableData: any = ref([]);
const loading = ref(false);


function loadTable() {
  loading.value = true;

  tableData.value = [];

  setTimeout(() => {
    tableData.value = [
      {
        id: 1,
        date: 'parent1',
        name: 'wangxiaohu',
        children: genNestChilds(),
      },
      {
        id: 2,
        date: 'parent2',
        name: 'wangxiaohu',
        children: genChilds(),
      },
      {
        id: 3,
        date: 'parent3',
        name: 'wangxiaohu',
        children: genChilds(),
      },
      {
        id: 4,
        date: 'parent4',
        name: 'wangxiaohu',
        children: genChilds(),
      },
    ];
    loading.value = false;
  }, 1000);
}
</script>
